Text dictionary tags
Description
Show and define the Text Dictionary tags (<a5:t>...</a5:t>) used in the component.
Text dictionary tags are a very convenient way to add multiple translations to a component. The text dictionary tags function very much like language tags. However, unlike language tags, the data used in text dictionary tags is stored in an SQL table. This table can be easily created in the Project Properties section of Alpha Anywhere. The generated table has three fields: a key field, a language field, and a data field. The rows of generated tables can be filled in here, using the 'Text dictionary tags' property, provided that there are controls in the component that have received text dictionary tags.
In cases where you wish to assign <a5:t>...</a5:t> tags to many controls in one go, it can be very helpful to use the Internationalization Helper Utilities option, which is accessible through the Additional Options Menu on the UX Controls page. Once a number of tags have been defined you can set the language that you want to display in the component using the 'Active language' property.
In addition to the guides found on this page and linked pages, there are also several videos that explain the use of text dictionary tags. The videos below explain how to create and define text dictionary tags and edit existing tags. There is also a video that explains how to use the Internationalization Genie, i.e. the internationalization helper utilities.
- Watch Video - Text Dictionary Tags
- Watch Video - Editing Existing Text Dictionary Tags
- Watch Video - Internationalization Genie
Create a Text Dictionary Table
These examples are also shown on the Active language page. The 'Active language' page also demonstrates how to create a dropdown list to allow users to select the active language.
You can automatically select the active language using the device's culture code. See Supporting Device Culture Codes to learn more.
In the Web Projects Control Panel click on the Project Properties button in the panel toolbar.
Scroll down to and expand the 'Text Dictionary Table Settings' section. Click on the
button next to the Connection string property.
Set the Table Type to SQL
Click the
button next to the 'Connection string' property and form a connection string to the Northwind database.
Type the name of the Table you wish to create in the 'Table name' property, in this can 'Language Dictionary'. As this is a new table you can simply type the table name into the textbox next to this property.
Click the 'Create Text Dictionary Table' button at the bottom of the 'Define Text Dictionary Table' dialog. A message should be displayed stating that the table was created. Click OK and OK again.
Create Controls that use Text Dictionary Tags from the Table
Create a new UX Component. In the UX Builder on the UX Controls page open the 'Data Controls' menu. Click on the TextBox option to add a textbox control to the component. Give the text box control the name and label 'name'.
Go back to the 'Data Controls' menu and click on the [TextArea] option to add a text area control to the component. Give this control the name and label of 'input'
Open the 'Other Controls' menu and click on [Button] to add a button control to your component.
Highlight the button control. In the properties list on the right change the 'Button text' property to read 'submit'.
Add the Text Dictionary Tags
In the UX Controls page click the 'Menu' dropdown in the toolbar to open the Additional Options Menu. Select the 'Internationalization Helper Utilities' option.
In the helper dialog click the 'Select Option' button, choose 'Control Labels', and then click 'Add Text Dictionary tags to all control Labels'.
The control labels you defined should appear with <a5:t></a5:t> tags around them. Click the 'Execute Code' button.
Click the 'Select Option' button again, choose the 'Button Controls' option, and click add Text Dictionary tags to all control Labels'.
Click the 'Execute Code' button and close the 'Internationalization Helper Utilities' dialog.
Add Language Definitions to Each Tag
In the UX Builder on the UX Properties page scroll down to the 'Other' properties section. Click the
button next to the 'Text dictionary tags' property.
In the 'Text Dictionary Tags Used in this Component' list highlight the 'Name' tag.
Click the 'Create New Text Dictionary Entry' button. We will be creating a new entry for "English". If you have set the Active language to <culture>, you must enter the appropriate culture code here. For example, "en-US" for US English. If you have set the Active language to <Default>, you can define the language as 'English'.
Enter some text into the 'Enter Text' dialog to define the value of the name control for the English language. Type something like the following and click OK.
Enter your name.
Click the 'Create New Text Dictionary Entry' button a second time. Enter the name of a second language entry that you want to define. Here we will put 'Japanese'.
If the active language will be determined from the culture code, enter "ja" instead of "Japanese".
Define some text for the second language and click OK. This can be cut and pasted from some other text; for example, from Google Translate.
Click the 'Create New Text Dictionary Entry' button a third time. Add a third language to the 'name' tag, like "French".
If the active language will be determined from the culture code, enter "fr-FR" instead of "French".
Define the text for the third language.
Highlight the 'Input' tag in the 'Text Dictionary Tags Used in this component' list.
Add the English, Japanese, and French languages to the 'Input' tag, defining new text for each language in the same way as you did for the name tag.
Repeat for the 'submit' tag. Then click OK to close the dialog.
In the 'Other' properties section of the UX Properties page, set the 'Active language' property to one of the languages that you defined in the 'Text dictionary tags' property.
Run the component in Live Preview. You should see the data in each control correlate with the active language that you defined.
See Also